<template>
  <el-dialog
      v-model="visible"
      title="安全验证"
      :close-on-click-modal="false"
      class="captcha-dialog--custom"
    >
    <div class="captcha-modal">
      <!-- 验证码区域 -->
      <div class="captcha-section">
        <div class="captcha-header">
          <span class="hint-text">请输入下方验证码</span>
          <el-button 
            link 
            type="primary" 
            @click="refreshCaptcha"
            class="refresh-btn"
          >
            <el-icon><Refresh /></el-icon>
            换一张
          </el-button>
        </div>
        
        <div class="captcha-image-wrapper" @click="refreshCaptcha">
          <img :src="imageUrl" alt="验证码" class="captcha-image">
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-section">
        <el-input
          v-model="inputValue"
          placeholder="请输入4位验证码"
          :maxlength="4"
          clearable
          size="large"
          @keyup.enter="handleConfirm"
          class="captcha-input"
        />
      </div>

      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button 
          size="default" 
          @click="handleCancel"
          class="cancel-btn"
        >
          取消
        </el-button>
        <el-button 
          type="primary" 
          size="default" 
          @click="handleConfirm"
          :disabled="!inputValue"
          class="confirm-btn"
        >
          确认
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'

const props = defineProps({
  visible: Boolean,
  codeUrl: {
    type: String,
    default: 'http://ll.cn/index/index/getcode'
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

const visible = ref(false)
const inputValue = ref('')
const imageUrl = ref('')

watch(() => props.visible, (newVal) => {
  visible.value = newVal
  if (newVal) {
    loadCaptcha()
  }
})

watch(visible, (newVal) => {
  emit('update:visible', newVal)
})

const loadCaptcha = () => {
  imageUrl.value = `${props.codeUrl}?t=${Date.now()}`
  inputValue.value = ''
}

const refreshCaptcha = () => {
  loadCaptcha()
}

const handleConfirm = () => {
  if (!inputValue.value) {
    ElMessage.warning('请输入验证码')
    return
  }
  
  if (inputValue.value.length !== 4) {
    ElMessage.warning('请输入4位验证码')
    return
  }
  
  emit('confirm', inputValue.value)
  visible.value = false
}

const handleCancel = () => {
  visible.value = false
}
</script>

<style>
.captcha-modal {
  padding: 0;
}

.captcha-dialog--custom {
  --el-dialog-width: 50%;
  width: var(--el-dialog-width);
}

.captcha-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.hint-text {
  color: #606266;
  font-size: 14px;
}

.refresh-btn {
  padding: 4px 8px;
  font-size: 12px;
}

.captcha-image-wrapper {
  width: 100%;
  height: 60px;
  background: #f8f9fa;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #e4e7ed;
  transition: all 0.3s;
}

.captcha-image-wrapper:hover {
  border-color: #409eff;
}

.captcha-image {
  height: 60px;
  object-fit: contain;
}

.input-section {
  margin-bottom: 24px;
}

.captcha-input {
  width: 100%;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

 .cancel-btn,
  .confirm-btn {
    width: 48%;
  }

/* 移动端优化 - 修正宽度为90% */
@media (max-width: 768px) {
  
  .captcha-dialog--custom {
      width: 90% !important;
      --el-dialog-width: 90% !important;
    }

  .captcha-section {
    margin-bottom: 20px;
  }

  .captcha-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .refresh-btn {
    align-self: flex-end;
  }



  .captcha-image {
    height: 50px;
  }



 
}

/* 平板端优化 */
@media (min-width: 769px) and (max-width: 1024px) {
  .captcha-dialog--custom {
    width: 70% !important;
    max-width: 400px;
    --el-dialog-width: 70% !important;
  }
}

/* 桌面端优化 */
@media (min-width: 1025px) {
  .captcha-dialog--custom {
    width: 420px !important;
    --el-dialog-width: 420px !important;
  }
}
</style>